<!-- 财富频道页面 -->

<template>
	<view class="box">
		<!-- 搜索框 -->
		<view class="ss">
			<input class="search" placeholder="搜索相关内容" />
			<image class="search-image" src="/static/channel/sousuo(3).png"></image>
		</view>

		<!-- 内容 -->
		<view class="content">
			<view class="xiaotubiao">
				<view class="tubiao" v-for="item in channelHeaderData" :key="item.id" @tap="jumpFunds">
					<image class="tubiao-img" :src="item.imagesrc"></image>
					<view class="tubiao-tex">{{ item.name }}</view>
				</view>
			</view>

			<view class="tupian">
				<image class="tupain-img" src="/static/channel/banner(3).png"></image>
			</view>

			<view class="youxuan">
				<view class="huotui"></view>
				<text class="youxuan-tex1">稳健优选 </text>
				<text class="youxuan-tex2">| 适合新手投资 稳中求进</text>
				<text class="youxuan-img">></text>
			</view>

			<view class="" >
				<view class="top-tabbar">
					<view class="tabbar-itme" :class="{ active: index == currentTab }" v-for="(item, index) in current"
						:key="item" @tap="swioerChange(index)">{{ item }}</view>
				</view>
				<swiper class="swiper" @change="changeTab" :current="currentTab">
					<swiper-item class="qq">
						<view class="swiper-item">
							<view class="qq-top" @click="jump" v-for="item in hotData" :key='item'>
								<view class="">
									<view class="top-img">
										<image class="topimage" src="/static/channel/wenjianyouxuan(3).png"></image>
									</view>
									<view class="bbb" style="float: left">
										<view class="ddd" style="display: flex; padding-top: 10rpx">
											<view class="top-text1-left">{{item.netValue}}%</view>
										</view>
										<view class="top-text2">近一年</view>
									</view>
								</view>
								<view class="right">
									<view class="qq-right-text">{{item.fundCompanyName}}</view>
									<view class="qq-right-text1">{{item.fundNameAbbr}}</view>
								</view>
							</view>

						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">2</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">3</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="youxuan">
				<view class="huotui"></view>
				<text class="youxuan-tex1">收益进取 </text>
				<text class="youxuan-tex2">| 收益进阶，历史业绩亮眼</text>
				<text class="youxuan-img">></text>
			</view>

			<view class="">
				<view class="top-tabbar">
					<view class="tabbar-itme" :class="{ active: index == currentTab1 }"
						v-for="(item, index) in current1" :key="item" @tap="swioerChange1(index)">{{ item }}</view>
				</view>
				<swiper class="swiper2" @change="changeTabs" :current1="currentTab1">
					<swiper-item class="qq">
						<view class="swiper-item2">
							<view class="qq-top1">
								<view class="top-img1">
									<image class="topimage1" src="/static/channel/wenjianyouxuan(3).png"></image>
								</view>
								<view class="" style="display: flex; flex-wrap: wrap">
									<view class="right1">
										<view class="qq-right-text-1">投研副总挂帅 <text class="tt">|</text> 聚焦新能源</view>
										<view class="qq-right-text-2">中欧先进制造股票CA</view>
									</view>
									<view class="right-xia">
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left">11.76%</view>
											</view>
											<view class="top-text2">近一年</view>
										</view>
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left-1">11.76%</view>
											</view>
											<view class="top-text2-1">近一年</view>
										</view>
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left-1">11.76%</view>
											</view>
											<view class="top-text2-1">近一年</view>
										</view>
									</view>
								</view>
							</view>

							<view class="qq-top1">
								<view class="top-img1">
									<image class="topimage1" src="/static/channel/shourujinqu(3).png"></image>
								</view>
								<view class="" style="display: flex; flex-wrap: wrap">
									<view class="right1">
										<view class="qq-right-text-1">投研副总挂帅 <text class="tt">|</text> 聚焦新能源</view>
										<view class="qq-right-text-2">中欧先进制造股票CA</view>
									</view>
									<view class="right-xia">
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left">11.76%</view>
											</view>
											<view class="top-text2">近一年</view>
										</view>
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left-1">11.76%</view>
											</view>
											<view class="top-text2-1">近一年</view>
										</view>
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left-1">11.76%</view>
											</view>
											<view class="top-text2-1">近一年</view>
										</view>
									</view>
								</view>
							</view>

							<view class="qq-top1">
								<view class="top-img1">
									<image class="topimage1" src="/static/channel/shourujinqu(3).png"></image>
								</view>
								<view class="" style="display: flex; flex-wrap: wrap">
									<view class="right1">
										<view class="qq-right-text-1">投研副总挂帅 <text class="tt">|</text> 聚焦新能源</view>
										<view class="qq-right-text-2">中欧先进制造股票CA</view>
									</view>
									<view class="right-xia">
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left">11.76%</view>
											</view>
											<view class="top-text2">近一年</view>
										</view>
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left-1">11.76%</view>
											</view>
											<view class="top-text2-1">近一年</view>
										</view>
										<view class="bbb" style="float: left">
											<view class="ddd" style="display: flex; padding-top: 10rpx">
												<view class="top-text1-left-1">11.76%</view>
											</view>
											<view class="top-text2-1">近一年</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">2</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">3</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 照片 -->
			<view style="margin-top: 40rpx">
				<view class="column-text">
					<text>咨询要闻</text>
					<text style="float: right; color: #cccccc">></text>
				</view>
				<scroll-view scroll-x="true" :show-scrollbar="true" class="pic" style="white-space: nowrap">
					<view class="img_wrapper">
						<image class="swiper-icon" src=""></image>
						<text class="swiper-text">华夏科创</text>
						<text class="swiper-text4">50ETF</text>
						<view class="ttt" style="display: flex">
							<text class="swiper-text2">首批科创链接</text>
							<text class="swiper-text3">指数投资专家</text>
						</view>
						<image class="img-1-1" src="/static/channel/yangyuning(3).png"></image>
						<text class="text-1-1">杨宇宁</text>
						<text class="text-1-2">认购截止日 2021-4-6</text>

						<image class="swiper-icon1" src=""></image>
						<text class="swiper-text-1">华夏科创</text>
						<text class="swiper-text4-1">50ETF</text>
						<view class="ttt-1" style="display: flex">
							<text class="swiper-text2-1">首批科创链接</text>
							<text class="swiper-text3-1">指数投资专家</text>
						</view>
						<image class="img-1-1-1" src="/static/channel/yangyuning(3).png"></image>
						<text class="text-1-1-1">杨宇宁</text>
						<text class="text-1-2-1">认购截止日 2021-4-6</text>
					</view>
				</scroll-view>
			</view>

			<!-- 咨询要闻 -->
			<view class="column">
				<view class="column-text">
					<text>咨询要闻</text>
					<text style="float: right; color: #cccccc">></text>
				</view>
				<view class="headline">
					<view class="" style="
              height: 200rpx;
              border-bottom: 1rpx solid #fbfbfb;
              display: flex;
            ">
						<view class="headline-text">
							<view class="textTitle">
								<text>来了来了！科创50ETF链接基金 重磅新发</text>
							</view>
							<view class="textWapper">
								<text class="textWapper-1">翔瑞金融资讯</text>
								<text class="textWapper-2">1833浏览</text>
							</view>
						</view>
						<view class="headline-imgage">
							<image src="/static/channel/xinwenpeituyi(3).png" style="width: 208rpx; height: 154rpx">
							</image>
						</view>
					</view>

					<view class="" style="
              height: 200rpx;
              border-bottom: 1rpx solid #fbfbfb;
              display: flex;
              margin-top: 34rpx;
            ">
						<view class="headline-text">
							<view class="textTitle">
								<text>来了来了！科创50ETF链接基金 重磅新发</text>
							</view>
							<view class="textWapper">
								<text class="textWapper-1">翔瑞金融资讯</text>
								<text class="textWapper-2">1833浏览</text>
							</view>
						</view>
						<view class="headline-imgage">
							<image src="/static/channel/xinwenpeituyi(3).png" style="width: 208rpx; height: 154rpx">
							</image>
						</view>
					</view>

					<view class="" style="
              height: 200rpx;
              border-bottom: 1rpx solid #fbfbfb;
              display: flex;
              margin-top: 34rpx;
            ">
						<view class="headline-text">
							<view class="textTitle">
								<text>来了来了！科创50ETF链接基金 重磅新发</text>
							</view>
							<view class="textWapper">
								<text class="textWapper-1">翔瑞金融资讯</text>
								<text class="textWapper-2">1833浏览</text>
							</view>
						</view>
						<view class="headline-imgage">
							<image src="/static/channel/xinwenpeituyi(3).png" style="width: 208rpx; height: 154rpx">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="jiazai"> 加载更多... </view>
		</view>
	</view>
</template>

<script>
	import apis from "../../api/apis.js";
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"channel"
	);
	export default {
		data() {
			return {
				current: ["稳中求进", "安稳增值", "活期理财", ""],
				current1: ["绩优股基", "精选指数", "布局海外", ""],
				currentTab: 0,
				currentTab1: 0,
				channelHeaderData: [],
				hotData: []
			};
		},
		mounted() {
			this.mygetChannelHeader();
			this.mygetChannelHot()
		},
		methods: {

			...mapActions(["getChannelHeader", 'getChannelHot']),
			jumpFunds(){
				uni.navigateTo({
					url:"../funds/seniority"
				})
			},

			changeTab(e) {
				this.currentTab = e.detail.current;
			},
			swioerChange(index) {
				this.currentTab = index;
			},
			changeTabs(e) {
				this.currentTab1 = e.detail.current;
			},
			swioerChange1(index) {
				this.currentTab1 = index;
			},
			// 跳转
			jump() {
				uni.navigateTo({
					url: '/pages/tradingRules/tradingRules'
				});
			},


			async mygetChannelHeader() {
				let data = await this.getChannelHeader();
				if (data.code == 200) {
					this.channelHeaderData = data.data;
				}
			},
			async mygetChannelHot() {
				let data = await this.getChannelHot()
				console.log(data)
				if (data.code == 200) {
					this.hotData = data.data.list
				}
			}
		},
	};
</script>

<style>
	.box {
		background-color: #ffffff;
	}

	.ss {
		height: 250rpx;
		text-align: center;
		position: relative;
		background-color: #3276f1;
		padding-top: 40rpx;
		border-bottom-left-radius: 46rpx;
		border-bottom-right-radius: 46rpx;
	}

	.search {
		width: 700rpx;
		height: 60rpx;
		margin: 0 auto;
		color: #b7b7b7;
		background-color: #ffffff;
		border-top-left-radius: 46rpx;
		border-bottom-left-radius: 46rpx;
		border-top-right-radius: 46rpx;
		border-bottom-right-radius: 46rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.search-image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: 250rpx;
		bottom: 205rpx;
		z-index: 11;
	}

	.content {
		margin: 20rpx;
		position: relative;
		top: -150rpx;
	}

	.xiaotubiao {
		background-color: #ffffff;
		border-radius: 20rpx !important;
		height: 300rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05);
	}

	.tubiao {
		width: 126rpx;
		height: 80rpx;
	}

	.tubiao-img {
		width: 48rpx;
		height: 48rpx;
	}

	.tubiao-tex {
		font-size: 24rpx;
		color: #666666;
	}

	.tupian {
		padding-top: 40rpx;
	}

	.tupain-img {
		width: 700rpx;
		height: 200rpx;
	}

	.youxuan {
		padding-top: 40rpx;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.huotui {
		width: 8rpx;
		height: 30rpx;
		background: #3476f1;
		opacity: 1;
		border-radius: 6rpx;
	}

	.youxuan-tex1 {
		width: 128rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 44rpx;
		color: #333333;
		opacity: 1;
		padding-left: 10rpx;
	}

	.youxuan-tex2 {
		width: 510rpx;
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28rpx;
		color: #999999;
		opacity: 1;
		padding-left: 10rpx;
	}

	.youxuan-img {
		float: right;
		color: #cccccc;
		opacity: 1;
	}

	.top-tabbar {
		height: 90rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.tabbar-itme {
		width: 148rpx;
		height: 52rpx;
		line-height: 52rpx;
		flex-grow: 1;
		font-weight: 400;
		text-align: center;
		color: #999999;
		font-size: 24rpx;
		border-radius: 10rpx;
	}

	.active {
		background-color: #3476f1;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: bold;
	}

	.swiper {
		height: 406rpx;
		background: #ffffff;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-top: 18rpx;
	}

	.swiper-item {
		height: 406rpx;
	}

	.qq-top {
		display: flex;
		align-items: center;
		height: 140rpx;
		border-bottom: 1px solid #fbfbfb;
	}

	.top-img {
		width: 70rpx;
		height: 70rpx;
		opacity: 0.3;
		float: left;
	}

	.topimage {
		width: 70rpx;
		height: 70rpx;
	}

	.top-text1-left {
		width: 112rpx;
		height: 44rpx;
		font-size: 24rpx;
		font-family: Lato;
		font-weight: bold;
		line-height: 30rpx;
		color: #f85656;
		opacity: 1;
		padding-left: 20rpx;
	}

	.top-text2 {
		padding-left: 20rpx;
		width: 72rpx;
		height: 34rpx;
		font-size: 24rpx;
		/* font-family: PingFang SC; */
		font-weight: 400;
		line-height: 34rpx;
		color: #333333;
		opacity: 1;
	}

	.right {
		float: right;
		/* padding-right: 114rpx; */
		/* line-height: 48rpx; */
		padding-left: 128rpx;
	}

	.qq-right-text {
		width: 300rpx;
		height: 40rpx;
		font-size: 28rpx;
		/* font-family: PingFang SC; */
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.qq-right-text1 {
		width: 230rpx;
		height: 34rpx;
		font-size: 24rpx;
		margin-top: 18rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
	}

	.swiper2 {
		height: 734rpx;
		background: #ffffff;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-top: 18rpx;
	}

	.swiper-item2 {
		height: 734rpx;
	}

	.qq-top1 {
		height: 244rpx;
		display: flex;
		border-bottom: 1px solid #fbfbfb;
		align-items: center;
	}

	.top-img1 {
		width: 98rpx;
		height: 142rpx;
		opacity: 0.3;
		float: left;
	}

	.topimage1 {
		width: 98rpx;
		height: 142rpx;
	}

	.right1 {
		width: 400rpx;
		height: 100rpx;
		text-align: top;
		padding-left: 20rpx;
		/* display: flex; */
	}

	.qq-right-text-1 {
		width: 350rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.qq-right-text-2 {
		width: 240rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
	}

	.right-xia {
		display: flex;
		flex-grow: 1;
		justify-content: space-between;
	}

	.tt {
		color: #cccccc;
		padding: 10rpx;
	}

	.top-text1-left-1 {
		width: 136rpx;
		height: 44rpx;
		font-size: 28rpx;
		font-family: Lato;
		font-weight: bold;
		line-height: 34rpx;
		color: #333333;
		opacity: 1;
	}

	.top-text2-1 {
		width: 72rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 24rpx;
		color: #999999;
		opacity: 1;
	}

	.pic {
		margin: 14rpx;
	}

	.img_wrapper {
		position: relative;
	}

	.swiper-icon {
		width: 514rpx;
		height: 244rpx;
		background: #ffffff;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
	}

	.swiper-text {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		left: 26rpx;
		top: 36rpx;
		text-align: center;
		position: absolute;
	}

	.swiper-text4 {
		width: 78rpx;
		height: 36rpx;
		font-size: 28rpx;
		font-family: DINPro;
		font-weight: 500;
		line-height: 36rpx;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 150rpx;
		top: 40rpx;
	}

	.ttt {
		width: 140rpx;
		height: 34rpx;
		border-radius: 4px;
		text-align: center;
		position: absolute;
		left: 24rpx;
		top: 120rpx;
	}

	.swiper-text2 {
		width: 140rpx;
		height: 34rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28rpx;
		background: #eaf1fe;
		color: #3476f1;
		position: absolute;
	}

	.swiper-text3 {
		width: 140rpx;
		height: 34rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28rpx;
		color: #be7f22;
		background: #f9f2e8;
		text-align: center;
		position: absolute;
		left: 157rpx;
	}

	.img-1-1 {
		width: 54rpx;
		height: 54rpx;
		position: absolute;
		left: 26rpx;
		top: 180rpx;
	}

	.text-1-1 {
		position: absolute;
		left: 100rpx;
		top: 188rpx;
		width: 84rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}

	.text-1-2 {
		width: 120rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
		position: absolute;
		left: 255rpx;
		top: 195rpx;
	}

	.swiper-icon1 {
		width: 514rpx;
		height: 244rpx;
		background: #ffffff;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		padding-left: 20rpx;
	}

	.swiper-text-1 {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		left: 526rpx;
		top: 36rpx;
		text-align: center;
		position: absolute;
	}

	.swiper-text4-1 {
		width: 78rpx;
		height: 36rpx;
		font-size: 28rpx;
		font-family: DINPro;
		font-weight: 500;
		line-height: 36rpx;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 650rpx;
		top: 40rpx;
	}

	.ttt-1 {
		width: 140rpx;
		height: 34rpx;
		border-radius: 4px;
		text-align: center;
		position: absolute;
		left: 524rpx;
		top: 120rpx;
	}

	.swiper-text2-1 {
		width: 140rpx;
		height: 34rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28rpx;
		background: #eaf1fe;
		color: #3476f1;
		position: absolute;
	}

	.swiper-text3-1 {
		width: 140rpx;
		height: 34rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28rpx;
		color: #be7f22;
		background: #f9f2e8;
		text-align: center;
		position: absolute;
		left: 155rpx;
	}

	.img-1-1-1 {
		width: 54rpx;
		height: 54rpx;
		position: absolute;
		left: 526rpx;
		top: 180rpx;
	}

	.text-1-1-1 {
		position: absolute;
		left: 100rpx;
		top: 188rpx;
		width: 84rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		left: 595rpx;
	}

	.text-1-2-1 {
		width: 120rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
		position: absolute;
		left: 758rpx;
		top: 195rpx;
	}

	.column {
		opacity: 1;
		border-radius: 12px;
		margin-top: 40rpx;
	}

	.column-text {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 44rpx;
		color: #000000;
		opacity: 1;
		border-left: 8rpx solid #3476f1;
		padding-left: 18rpx;
	}

	.textTitle {
		display: flex;
	}

	.headline {
		height: 642rpx;
		background: #ffffff;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 12px;
		margin-top: 18rpx;
		padding: 24rpx;
	}

	.headline-text {
		width: 424rpx;
		padding-right: 22rpx;
	}

	.headline-imgage {
		height: 154rpx;
		width: 208rpx;
	}

	.textTitle {
		width: 394rpx;
		height: 84rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #333333;
		opacity: 1;
	}

	.textWapper {
		margin-top: 46rpx;
	}

	.textWapper-1 {
		width: 144rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
	}

	.textWapper-2 {
		width: 144rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
		padding-left: 20rpx;
	}

	.headTime {
		display: flex;
	}

	.headTime-text {
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		color: #999999;
	}

	.headTimeHour {
		height: 34px;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 34rpx;
		color: #666666;
	}

	.jiazai {
		margin-top: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}
</style>
